<template>
    <div :class="top === 0 ?'head_top' : 'heads'">
        <div class="head_nav">
            <div class="logo" @click="$router.push('/page1')">
                <img class="logo_photo" v-if="top === 0 && textColor === '#fff'" src="../../assets/image/logo/whitelogo.png" alt="">
                <img class="logo_photo" v-else src="../../assets/image/logo/blacklogo.png" alt="">
            </div>
            <div class="head_right">
                <ul class="head_menu_ul">
                    <li class="head_menu_li">
                        <router-link :to="'/page1'">
                            <a class="head_menu_li_a"
                               :style="{color:top === 0 ? textColor : '#494e5a'}"
                               :class="current === 1 ? 'head_menu_active' : ''"
                               @mouseover="highLight(1)"
                               @mouseleave="routerLight">
                                首页
                            </a>
                        </router-link>
                    </li>
                    <li class="head_menu_li">
                        <router-link :to="'/page1'">
                            <a class="head_menu_li_a"
                               :style="{color:top === 0 ? textColor : '#494e5a'}"
                               :class="current === 2 ? 'head_menu_active' : ''"
                               @mouseover="highLight(2)"
                               @mouseleave="routerLight">
                                产品中心
                            </a>
                        </router-link>
                    </li>
                    <li class="head_menu_li">
                        <router-link :to="'/page1'">
                            <a class="head_menu_li_a"
                               :style="{color:top === 0 ? textColor : '#494e5a'}"
                               :class="current === 3 ? 'head_menu_active' : ''"
                               @mouseover="highLight(3)"
                               @mouseleave="routerLight">
                                解决方案
                            </a>
                        </router-link>
                    </li>
                    <li class="head_menu_li">
                        <router-link :to="'/page1'">
                            <a class="head_menu_li_a"
                               :style="{color:top === 0 ? textColor : '#494e5a'}"
                               :class="current === 4 ? 'head_menu_active' : ''"
                               @mouseover="highLight(4)"
                               @mouseleave="routerLight">
                                成功案例
                            </a>
                        </router-link>
                    </li>
                    <li class="head_menu_li">
                        <router-link :to="'/page1'">
                            <a class="head_menu_li_a"
                               :style="{color:top === 0 ? textColor : '#494e5a'}"
                               :class="current === 5 ? 'head_menu_active' : ''"
                               @mouseover="highLight(5)"
                               @mouseleave="routerLight"
                              >
                                关于我们
                            </a>
                        </router-link>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: ['textColor'],
        data(){
            return {
                top: 0,
                current: 1,
                style: '',
                headId: ''
            }
        },
        mounted() {
            window.addEventListener('scroll', this.topColor, true);
            this.topColor();
            this.routerLight();
        },
        destroyed() {
            window.removeEventListener("scroll", this.windowScroll); //销毁滚动事件
        },
        methods: {
            // 在最上方时背景随之变化
            topColor() {
                this.top = window.pageYOffset || document.documentElement.scrollTop
                    || document.body.scrollTop;
                console.log(window.pageYOffset , document.documentElement.scrollTop
                    ,document.body.scrollTop)
            },
            highLight() {
                this.current= 0;
            },
            routerLight() {
                let name = this.$route.path.split('/')[1];
                if (name === 'page1') {
                    this.current = 1;
                } else if (name === 'product') {
                    this.current = 2;
                } else if (name === 'solution') {
                    this.current = 3;
                } else if (name === 'success') {
                    this.current = 4;
                } else if (name === 'about') {
                    this.current = 5;
                } else {
                    this.current = 0;
                }
            },
        },
        watch:{
            'textColor':function(old){
                console.log(old)
            }
        }
    }
</script>

<style scoped>
    .head_top{
        position: fixed;
        z-index: 999;
        color: white;
        top: 0;
        width: 100%;
    }
    .heads{
        position: fixed;
        z-index: 999;
        color: black;
        top: 0;
        width: 100%;
        background-color: white;
    }
    .head_nav {
        width: 93%;
        height: 80px;
        max-width: 1800px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 auto;
    }

    .logo {
        max-width: 150px;
        float: left;
    }

    .logo_photo {
        width: 143px;
        cursor: pointer;
    }
    .logo_photo {
        width: 143px;
        cursor: pointer;
    }
    .head_right{
        display: flex;
        height: 100%;
        align-items: center;

    }
    .head_menu_ul{
        display: flex;
        align-items: center;
        height: 100%;
        justify-content: space-around;
        box-sizing: content-box;

    }
    .head_menu_li{
        width: 100px;
        font-size: 16px;
        height: 100%;
        box-sizing: content-box;
        line-height: 80px;
        text-align: center;
        font-weight: bold;
        position: relative;
        list-style: none;
        cursor: pointer;
        /*border-bottom: 4px solid transparent;*/
        transition: .4s all;
    }


    .head_menu_li_a{
        position: relative;
        font-size: 16px;
        font-weight: 400;
        display: block;
        height: 100%;
        cursor: pointer;
        text-align: center;
        padding: 0 0.5vw;
        box-sizing: border-box;
    }
    .head_menu_active{
        border-bottom: 4px solid #ff9e00;
    }
    .head_menu_item_hover::before,.head_menu_li_a::before{
        content: "";
        position: absolute;
        top: -4px;
        left: 0;
        border-bottom: 4px solid #ff9e00;
        width: 0;
        height: 80px;
    }
    .head_menu_li:hover .head_menu_active{
        border-bottom: 0 solid transparent;
    }
    .head_menu_li:hover .head_menu_li_a::before{
        width: 100%;
        transition: .2s all linear;
        transition-delay: .1s;
        /*border-bottom: 4px solid #ff9e00;*/
    }

    .head-active-id{
        background-color: white;
        box-shadow: none;
    }
</style>
